
"use client"; // 添加这行作为文件的第一行
import React from "react";
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

const links = [
  {
    sheng: "广东省",
    name: "广州市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "深圳市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "珠海市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "汕头市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "佛山市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "韶关市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "湛江市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "江门市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "茂名市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "惠州市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "梅州市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "汕尾市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "河源市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "阳江市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "清远市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "东菀市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "中山市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "潮州市",
    url: "/guangdong",
  },
  {
    sheng: "广东省",
    name: "中山市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "揭阳市",
    url: "/baoming/guangdongshi/guangdong",
  },
  {
    sheng: "广东省",
    name: "云浮市",
    url: "/baoming/guangdongshi/guangdong",
  },
];
export default function FriendlyLinks() {
  // const searchParams = useSearchParams();
  // const userId = searchParams.get("userId");
  // const userPhone = searchParams.get("userPhone");
  // console.log("userId广东省1",userId)
  // console.log("userPhone广东省1",userPhone)
  return (
    <section className="py-12 bg-[#F5F5F5]">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-1 text-red-600">广东省网络主播合规培训报名入口</h2>
        <p className="text-xl text-center mb-4 text-red-600 mt-4">
          请参加培训的学员，按照所在地级市报名，并写明招生老师或班主任的姓名
        </p>
        
        <div className="overflow-x-auto mt-8">
          <table className="w-full text-center">
            <tbody>
              {[...Array(Math.ceil(links.length / 11))].map((_, rowIndex) => (
                <tr key={rowIndex}>
                  {links.slice(rowIndex * 11, (rowIndex + 1) * 11).map((link, index) => (
                    <td key={index} className="px-2 py-1">
                      <Link
                        href={{
                          pathname: link.url,
                          query: {
                            sheng: encodeURIComponent(link.sheng),
                            city: encodeURIComponent(link.name),
                            // ...(userId && { userId }), // 条件添加userId
                            // ...(userPhone && { userPhone }) // 条件添加userPhone
                          }
                        }}
                        passHref
                        legacyBehavior
                      >
                        <a className="text-black hover:text-blue-800 transition-colors">
                          {link.name}
                        </a>
                      </Link>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}
